<template>
  <div class="announcement-mange">
    <h2>公告管理</h2>
    <!-- 发布公告 -->
    <el-form :model="form" class="announce-form" label-width="80px" @submit.prevent="handleCreate">
      <el-form-item label="标题">
        <el-input v-model="form.title" placeholder="请输入公告标题" />
      </el-form-item>
      <el-form-item label="内容">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="4"
          placeholder="请输入公告内容"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleCreate">发布公告</el-button>
      </el-form-item>
    </el-form>

    <el-divider />

    <!-- 公告列表 -->
    <el-table :data="announcementList" style="width: 100%" highlight-current-row>
      <el-table-column prop="title" label="标题" width="220" />
      <el-table-column prop="content" label="内容" />
      <el-table-column prop="adminId" label="发布人" width="120" />
      <el-table-column prop="updateTime" label="发布时间" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="openEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑公告弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑公告" width="480px">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="editForm.title" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="editForm.content" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const adminId = localStorage.getItem('adminId')
const form = reactive({
  title: '',
  content: ''
})
const announcementList = ref([])

// 获取公告列表
const fetchAnnouncements = async () => {
  try {
    const res = await axios.get(`http://localhost:8080/admin/${adminId}/announcements`)
    if (res.data && res.data.code === 200) {
      announcementList.value = res.data.data || []
      console.log('公告列表:', announcementList.value)
    }
  } catch (e) {
    ElMessage.error('获取公告失败')
  }
}

// 发布公告
const handleCreate = async () => {
  if (!form.title || !form.content) {
    ElMessage.warning('请填写完整信息')
    return
  }
  try {
    const res = await axios.post(
      `http://localhost:8080/admin/${adminId}/announcements`,
      {
        title: form.title,
        content: form.content,
        adminId: adminId
      }
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('公告发布成功')
      form.title = ''
      form.content = ''
      fetchAnnouncements()
    } else {
      ElMessage.error(res.data.msg || '公告发布失败')
    }
  } catch (e) {
    ElMessage.error('网络错误或服务器异常')
  }
}

// 编辑公告
const editDialogVisible = ref(false)
const editForm = reactive({
  announcementId: null,
  title: '',
  content: ''
})
const openEdit = (row) => {
  editForm.id = row.id
  editForm.title = row.title
  editForm.content = row.content
  editDialogVisible.value = true
}
const handleEdit = async () => {
  try {
    const res = await axios.put(
      `http://localhost:8080/admin/${Number(editForm.id)}/${adminId}/updateAnnouncements`,
      {
        title: editForm.title,
        content: editForm.content,
        adminId: adminId
      }
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('公告修改成功')
      editDialogVisible.value = false
      fetchAnnouncements()
    } else {
      ElMessage.error(res.data.msg || '公告修改失败')
    }
  } catch (e) {
    ElMessage.error('网络错误或服务器异常')
  }
}

// 删除公告
const handleDelete = async (announcementId) => {
  try {
    const res = await axios.delete(
      `http://localhost:8080/admin/announcements/${announcementId}/${adminId}`
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('公告删除成功')
      fetchAnnouncements()
    } else {
      ElMessage.error(res.data.msg || '公告删除失败')
    }
  } catch (e) {
    ElMessage.error('网络错误或服务器异常')
  }
}

onMounted(fetchAnnouncements)
</script>

<style scoped lang="scss">
.announcement-mange {
  max-width: 800px;
  margin: 40px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(90, 169, 233, 0.10);
  padding: 36px 32px 28px 32px;

  h2 {
    text-align: center;
    color: #357ab8;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    letter-spacing: 2px;
  }

  .announce-form {
    margin-bottom: 24px;
  }
}
</style>